<template>
  <!-- 最外层的大盒子 -->
  <div id="bg">
    <div class="my-box">
      <el-form ref="ruleFormRef" :model="user" status-icon :rules="rules" label-width="80px">
        <div style="padding:30px"><a href="/"><img src="~/assets/img/小葵花课堂2.png" width="100%" alt="霖霖学院"></a></div>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="user.mobile"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="user.password" type="password" show-password
            @keydown.enter="onSubmit(ruleFormRef)"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="btn-login-register" @click="onSubmit(ruleFormRef)">登录</el-button>
        </el-form-item>
        <el-row>
          <el-col :span="9">
            <router-link to="/register">没有账号?现在注册</router-link>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'

definePageMeta({
  layout: 'login'
})
const ruleFormRef = ref<FormInstance>()

const user = reactive({
  mobile: '17381517685',
  password: '123'
})
const rules = reactive<FormRules>({
  mobile: [{ required: true, trigger: 'change', message: '请输入手机号' }],
  password: [{ required: true, trigger: 'change', message: '请输入密码' }]
})
const router = useRouter()
const userStore = useUserStore()
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      userStore.loginAction(user).then(() => {
        router.push('/')
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>

<style scoped>
.my-box {
  width: 400px;
  height: auto;
  margin: auto;
  margin-top: 250px;
  border: solid 1px rgb(117, 114, 114);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 5px 5px 10px 5px #ccc;
  background-color: white;
  /* background: linear-gradient(to right, rgb(247, 209, 215), rgb(191, 227, 241)); */

}

.btn-login-register {
  width: 100%;
}

#bg {
  display: flex;
  height: 100vh;
  background-image: url('~/assets/img/xiongmao.jpg');
  background-size: cover;
}
</style>